import React, { FC, useEffect } from 'react'
import { Image, NavBar, TabBar } from 'antd-mobile'
import message from '../../assets/img/message.png'
import myInfo from '../../assets/img/myInfo.png'
import {
  Route,
  Switch,
  useHistory,
  useLocation,
  MemoryRouter as Router,
} from 'react-router-dom'
import {
  AppOutline,
  MessageOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
import './index.css'
import { httpJson } from '../../services/http'
import Home from './home'
import Manage from './manage'

const Bottom: FC = () => {
  const history = useHistory()
  const location = useLocation()
  const { pathname } = location

  const setRouteActive = (value: string) => {
    history.push(value)
  }

  useEffect(() => {
    httpJson('POST','/api/hello')
          .then(res=>{
            console.log(res)
          })
          .catch(err => {
            console.log(err)
          })
  },[])

  const tabs = [
    {
      key: '/order',
      title: '订单',
      icon: <AppOutline />,
    },
    {
      key: '/message',
      title: '消息',
      icon: <MessageOutline />,
    },
    {
      key: '/manage',
      title: '管理',
      icon: <UnorderedListOutline />,
    },
    {
      key: '/me',
      title: '我的',
      icon: <UserOutline />,
    },
  ]

  return (
    <TabBar defaultActiveKey="/order" activeKey={pathname} onChange={value => setRouteActive(value)}>
      {tabs.map(item => (
        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
      ))}
    </TabBar>
  )
}

export default () => {
  return (
    <Router initialEntries={['/order']}>
      <div className="app">
        <div className="top">
          <NavBar>商家管理</NavBar>
        </div>
        <div className="body">
          <Switch>
            <Route exact path='/order'>
              <Home />
            </Route>
            <Route exact path='/message'>
              <Todo />
            </Route>
            <Route exact path='/manage'>
              <Manage />
            </Route>
            <Route exact path='/me'>
              <PersonalCenter />
            </Route>
          </Switch>
        </div>
        <div className="bottom">
          <Bottom />
        </div>
      </div>
    </Router>
  )
}

function Todo() {
  return <Image src={message} />
}
function PersonalCenter() {
  return <Image src={myInfo} />
}